import { useRef, useState } from "react";

// export default function Counter() {
//   let ref = useRef(0);

//   function handleClick() {
//     ref.current = ref.current + 1;
//     console.log(ref.current)
//   }

//   // 将ref视为脱围机制
//   return (
//     <>
//       <p>当前值： {ref.current}</p>
//       <button onClick={handleClick}>点击我！</button>
//     </>
//   )
// }


// export default function StopWatch() {
//   const [startTime, setStartTime] = useState(null);
//   const [now, setNow] = useState(null);
//   const intervalRef = useRef(null);

//   const handleStart = () => {
//     setStartTime(Date.now());
//     setNow(Date.now());
//     intervalRef.current && clearInterval(intervalRef.current);
//     intervalRef.current = setInterval(() => {
//       setNow(Date.now());
//     }, 10);
//   }

//   const handleStop = () => {
//     clearInterval(intervalRef.current);
//   }


//   let secondsPassed = 0;
//   if (startTime != null && now != null) {
//     secondsPassed = (now - startTime) / 1000;
//   }


//   return (
//     <>
//       <p>时间过去了：{secondsPassed}</p>
//       <button onClick={handleStart}>开始</button>
//       <button onClick={handleStop}>停止</button>
//     </>
//   )
// }

// export default function Counter() {
//   const [count, setCount] = useState(0);
//   console.log('count state状态变化，组件重新执行了', count);
//   function handleClick() {
//     setCount(count + 1);
//   }

//   return (
//     <button onClick={handleClick}>点击了{count} 次</button>
//   )
// }


// export default function Counter() {
//   const countRef = useRef(0);
//   console.log('ref 值改变，并不会重新渲染组件');
//   function handleClick() {
//     // 这样并未重新渲染组件！
//     countRef.current += 1;
//     console.log(countRef.current);
//   }

//   return (
//     <button onClick={handleClick}>点击了{countRef.current} 次</button>
//   )
// }

/**
 * 什么时候会使用到ref?
 * 通常是在不会影响组件外观的浏览器api
 * 以下是这些罕见情况中的几个:
 * 1. 存储timeoutID
 * 2. 存储和操作DOM元素
 * 3. 存储不需要被用来计算JSX的其它对象
 */

// export default function Chat() {
//   const [text, setText] = useState('');
//   const [isSending, setIsSending] = useState(false);
//   let timeoutRef = useRef(null); // 常规变量不会在重新渲染之间存活，因为每次渲染都从头开始运行组件，并初始化变量

//   function handleSend() {
//     setIsSending(true);

//     timeoutRef.current = setTimeout(() => {
//       alert(`已发送${text}`)
//       setIsSending(false);
//     }, 3000)
//   }

//   function handleUndo() {
//     setIsSending(false);
//     clearTimeout(timeoutRef.current);
//   }

//   return (
//     <>
//       <input disabled={isSending} type="text" value={text} onChange={e => setText(e.target.value)} />
//       <button disabled={isSending} onClick={handleSend}>{isSending ? '发送中...' : '发送'}</button>
//       {isSending && <button onClick={handleUndo}>撤销</button>}
//     </>
//   )
// }


// export default function Toggle() {
//   const [isOn, setIsOn] = useState(false);

//   return (
//     <button onClick={() => {
//       setIsOn(!isOn);
//     }}>
//       {isOn ? '开' : '关'}
//     </button>
//   );
// }

// function DebounceButton({ onClick, children }) {
//   const timeoutID = useRef(null);
//   return (
//     <button onClick={() => {
//       clearTimeout(timeoutID.current);
//       timeoutID.current = setTimeout(() => {
//         onClick();
//       }, 1000)
//     }}>
//       {children}
//     </button>
//   )
// }

// export default function Dashboard() {
//   return (
//     <>
//       <DebounceButton
//         onClick={() => alert('宇宙飞船发射了')}>
//         发射宇宙飞船
//       </DebounceButton>
//       <DebounceButton
//         onClick={() => alert('汤煮完了')}>
//         煮点汤
//       </DebounceButton>
//       <DebounceButton
//         onClick={() => alert('摇篮曲唱完了')}>
//         唱首摇篮曲
//       </DebounceButton>
//     </>

//   )
// }

// 读取最新的state

export default function Chat() {
  const [text, setText] = useState('');
  const textRef = useRef('');
  const timeoutRef = useRef(null);

  function handleChange(e) {
    setText(e.target.value);
    textRef.current = e.target.value;
  }

  function handleSend() {
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => {
      alert(textRef.current);
    }, 3000)
  }

  return (
    <>
      <input type="text" value={text} onChange={handleChange} />
      <button onClick={handleSend}>发送</button>
    </>
  )
}
